18. 解釋 JSONP 如何運作

2021 iThome 鐵人賽

DAY 19

自我挑戰組

登堂入室！前端工程師的觀念技術 _30_ 題系列第 19 篇

13th鐵人賽

Winnie

2021-09-19 23:55:03

2474 瀏覽

分享至

（其實現在應該很少使用JSONP了，只是跟上一篇比較有關所以順便整理，簡單了解一下就好。）

JSONP

當請求一個跨域的資料時，資料會因為同源政策，而被瀏覽器阻擋。然而，在請求一個script時(例如、使用CDN)，並不會受到同源政策的限制。

JSONP (JSON with Padding) 也是一種跨領域請求的方式，透過將資料引入<script>，並用函式接住資料，來進行資料的求取。

示例

這裡借用一下W3C的範例，用php檔模擬一個server端:

// server
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

呈現的頁面會是像這樣的JSON格式:

myFunc({"name":"John", "age":30, "city":"New York"});

重點是將要請求的資料引入script:

<script src="demo_jsonp.php"></script>

（這裡的範例其實還是同源，但一般呼叫CDN也都是非同源，就可以知道放在<script src=""></script>的請求是可以跨域的。）

client檔的程式碼:

<!DOCTYPE html>
<html>
<body>

<h2>Request JSON using the script tag</h2>
<p>The PHP file returns a call to a function that will handle the JSON data.</p>
<p id="demo"></p>

<script>
function myFunc(myObj) {
 document.getElementById("demo").innerHTML = myObj.name;
}
</script> 

<script src="demo_jsonp.php"></script>

</body>
</html>

可以成功出現這樣的頁面：

Request JSON using the script tag

The PHP file returns a call to a function that will handle the JSON data.

John

因為上面的例子頁面是寫死的，我們可以用JS把頁面寫成能動態更新的狀態，並將資料寫入callback function。

<!DOCTYPE html>
<html>
<body>

<h2>Request With a Callback Function</h2>
<p>The PHP file returns a call to the function you send as a callback.</p>
<p id="demo"></p>

<script>
// 動態加入資料
let s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";  // 加入callback function的名稱
document.body.appendChild(s);

function myDisplayFunction(myObj) {
 document.getElementById("demo").innerHTML = myObj.name;
}
</script>

</body>
</html>

在client寫好要使用的callback function，並告訴server要調用哪個函式。